<template>
    <div>
        账号管理页面
        <!--  -->
        <div class="">

        </div>

        <div class="h-full w-full">
            <el-table :data="tableData" border style="width: 100%" height="600"
                :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column prop="date" label="账号" width="180" />
                <el-table-column prop="name" label="账号昵称" width="180" />
                <el-table-column prop="name" label="创建时间" width="180" />
                <el-table-column prop="name" sortable label="文章数量" width="180" />
                <el-table-column prop="name" label="关于我" width="180" />
                <el-table-column prop="name" label="ip地址" width="180" />
                <el-table-column prop="address" label="设备标识" />
                <el-table-column fixed="right" label="操作" min-width="80" hight="240">
                    <div class="flex justify-center items-center flex-col md:block">
                        <button
                            class="bg-red-500 text-gray-100 text-sm font-semibold py-2 px-4 rounded-lg m-2 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-300 ease-in-out whitespace-nowrap">
                            删除
                        </button>
                        <button
                            class="bg-blue-500 text-gray-100 text-sm font-semibold py-2 px-4 rounded-lg m-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-300 ease-in-out whitespace-nowrap">
                            追踪
                        </button>
                    </div>

                </el-table-column>
            </el-table>
        </div>

    </div>

</template>

<script setup lang="ts">
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: '0',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189',
    },
    {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189',
    },
    {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189',
    },
    {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189',
    },
]
</script>

<style scoped></style>